import { useSelector } from "react-redux"
import { Layout } from 'antd'
import ThemeToggle from './ThemeToggle'
const { Header } = Layout

const HeaderComponent = () => {
    const globalText = useSelector((state: unknown) => (state as { product: { globalText: string } }).product.globalText)
    
    return(<>
         <Header style={{ 
             display: 'flex', 
             alignItems: 'center', 
             justifyContent: 'space-between'
         }}>
            <div>
                <div className="demo-logo" />
                <div className="text-xl">
                    托尔斯泰后台管理系统
                </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                <div>{globalText}</div>
                <ThemeToggle />
            </div>
        </Header>
    </>)
}

export default HeaderComponent